<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <%
        String contextPath = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + contextPath + "/";
    %>
    <base href="<%=basePath%>">
    <meta charset="utf-8">
    <link href="assets/admin/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/admin/style.css"/>
    <link rel="stylesheet" href="assets/admin/css/ace.min.css"/>
    <link rel="stylesheet" href="fonts/admin/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/layui/layui.css" media="all">

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="assets/admin/js/typeahead-bs2.min.js"></script>
    <script src="assets/admin/layer/layer.js" type="text/javascript"></script>

    <title>景点维护</title>

    <style>
        <%--layui数据表格调整行高 --%>
        .layui-table-cell {
            /*height:76px;*/
            /*line-height: auto;*/
            height: 50px;
        }
    </style>
</head>

<body>
<div class="page-content clearfix">
    <div style="margin-top: 10px;">
        <div class="layui-form">
            <div class="layui-form-item" id="area-picker">
                <div class="layui-input-inline" style="width: 200px;">
                    <select id="province" name="province" class="province-selector" lay-filter="province-1">
                        <option value=""></option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select id="city" name="city" class="city-selector" lay-filter="city-1">
                        <option value=""></option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 200px;">
                    <select id="county" name="county" class="county-selector" lay-filter="county-1">
                        <option value=""></option>
                    </select>
                </div>
            </div>
        </div>
        <li style="float: right;margin-top: -50px;">
            <button type="button" class="layui-btn layui-btn-normal" onclick="refresh();"><i
                    class="layui-icon layui-icon-refresh"></i></button>
        </li>
    </div>
    <table class="layui-hide" id="table" lay-filter="table_filter"></table>
</div>

<!-- 点击添加按钮后的弹出窗口 -->
<div class="sort_style_add margin" id="sort_style_add" style="display:none;padding: 15px;">
    <%-- 表单 --%>
    <form class="layui-form" style="margin-left: -25px;" id="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">景点名称</label>
            <div class="layui-input-block">
                <input type="text" name="sightName" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">缩略图</label>
            <button type="button" class="layui-btn" id="test1" style="margin-left: 10px;">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <img id="sight_img" src="" width="150" height="70"/>
            <button class="layui-btn layui-btn-normal" style="display: none;" lay-submit lay-filter="formDemo" id="uploadImg">上传缩略图</button>
            <input id="sihgtImgInput" type="text" name="imgUrl" style="visibility: hidden;"/>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">景点主题</label>
            <div class="layui-input-block" id="sightThemes">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">开放时间</label>
            <div class="layui-input-block">
                <%-- autocomplete:是否让浏览器自动记录之前输入的值 【默认为on】 --%>
                <input type="text" name="openTime" required lay-verify="required" placeholder="请输入开放时间" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">所属公司</label>
            <div class="layui-input-inline" style="width: 200px;">
                <select id="sightCompany" name="sightCompany">

                </select>
            </div>
            <label class="layui-form-label" style="width: 100px;margin-left: 80px;">在售状态</label>
            <div class="layui-input-inline"  onclick="aa();">
                <input type="checkbox" name="onSellStatus" lay-skin="switch" checked lay-text="在售|停售">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form">
                <label class="layui-form-label" style="width: 100px;">地址</label>
                <div class="layui-form-item" id="area-picker2" style="display: inline-block">
                    <div class="layui-input-inline" style="width: 130px;">
                        <select name="country">
                            <option value="">中国</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 140px;">
                        <select name="province" class="province-selector" lay-filter="province-1">
                            <option value=""></option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 140px;">
                        <select name="city" class="city-selector" lay-filter="city-1">
                            <option value=""></option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 140px;">
                        <select name="county" class="county-selector" lay-filter="county-1">
                            <option value=""></option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">详细地址</label>
            <div class="layui-input-block">
                <input type="text" name="detailAddr" required lay-verify="required" placeholder="请输入景点详细地址" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" style="width: 100px;">景点简介</label>
            <div class="layui-input-block">
                <textarea name="introduce" placeholder="请输入景点简介..." class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label" style="width: 100px;">预定须知</label>
            <div class="layui-input-block">
                <textarea name="orderNotice" placeholder="请输入预定须知..." class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px;">上传照片</label>
                <div class="layui-input-inline uploadHeadImage">
                    <div class="layui-upload-drag" id="imgsDiv">
                        <i class="layui-icon"></i>
                        <p>点击上传图片，或将图片拖拽到此处</p>
                    </div>
                </div>
                预览图：
                <div class="layui-upload-list" id="imgList"></div>

                <button class="layui-btn layui-btn-normal" style="display: none;" lay-submit lay-filter="formDemo" id="uploadImgs">上传图片</button>

                <textarea type="text" id="imgUrls" name="imgUrls" style="visibility: hidden;" class="layui-input"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo" id="submitBtn">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                <button class="layui-btn layui-btn-warm" onclick="cancelSubmit();">取消</button>
            </div>
        </div>
    </form>
</div>

<%-- 自定义操作模板 --%>
<script type="text/html" id="operateTemplate">
    <a href="javascript:;" class="btn btn-xs btn-info"><i class="fa fa-edit bigger-120" lay-event="edit">编辑</i></a>
    <a href="javascript:;" class="btn btn-xs btn-warning"><i class="fa fa-trash  bigger-120" lay-event="del">删除</i></a>
    <a href="javascript:void(0);" name="Ads_list.html" class="btn btn-xs btn-pink ads_link"
       onclick="showOrderBySightId();" title="景点订单列表"><i class="fa  fa-bars  bigger-120">查看订单</i></a>
</script>

<%-- 自定义顶部栏模板 --%>
<script type="text/html" id="toolbarTemplate">
    <a href="javascript:void(0);" onclick="add()" class="btn btn-warning"><i class="fa fa-plus"></i> 添加</a>
    <a href="javascript:void(0);" onclick="deleteBatch()" class="btn btn-danger"><i class="fa fa-trash"></i> 批量删除</a>
</script>

<%-- 开关模板 --%>
<script type="text/html" id="switchTemplate">
    <%--
        属性checked可设定默认开
        属性disabled开启禁用
        属性lay-text可自定义开关两种状态的文本
        设置value="1"可自定义值，否则选中时返回的就是默认的on
    --%>
    <%--<input type="checkbox" name="onSellStatus" value="1" lay-skin="switch" lay-text="在售|停售">--%>
</script>

<script src="js/layui/layui.js"></script>
<script type="text/javascript">
    var flag = false; // 标志位
    var imgFlag = false; // 景点缩略图图片上传成功的标志【点击提交后，只有当图片上传成功后，才能获得图片保存的路径，此时才能进行异步表单提交】
    var imgsFlag = false; // 景点图片上传成功的标志【点击提交后，只有当图片上传成功后，才能获得图片保存的路径，此时才能进行异步表单提交】
    $(function () {

        $.post("sight_theme/findAllTheme", {}, function (data) {
            var count = 1;
            // 判断是否查找成功
            if (typeof (data.flag) == "undefined") {
                var themeStr = "";
                //遍历数组,拼接字符串
                for (var i = 0; i < data.length; i++) {
                    var theme = data[i];
                    themeStr += '<input type="checkbox" value="' + theme.themeId + '" name="theme' + (count++) + '" title=' + theme.themeName + '>';
                }

                $("#sightThemes").html(themeStr);
            }
        });
        $.post("sight_company/findAll", {}, function (data) {
            // 判断是否查找成功
            if (typeof (data.length) != "undefined") {
                var sightCompanyStr = '<option value="">请选择公司</option>';
                //遍历数组,拼接字符串
                for (var i = 0; i < data.length; i++) {
                    var sightCompany = data[i];
                    sightCompanyStr += '<option value="' + sightCompany.sightCompanyId + '">' + sightCompany.companyName + '</option>';
                }
                $("#sightCompany").append(sightCompanyStr);
            }
        });

        /* 添加景点表单提交 */
        $("#addForm").submit(function () {

            $("#sihgtImgInput").change(function () {
                // 上传缩略图
                $("#uploadImg").click();
            });
            if ($("#sihgtImgInput").val() == "") {
                // 上传缩略图
                $("#uploadImg").click();
            }

            $("#imgUrls").change(function () {
                // 上传景点图片
                $("#uploadImgs").click();
            });
            if ($("#imgUrls").val() == "") {
                // 上传缩略图
                $("#uploadImgs").click();
            }

            setTimeout("addAjax()", 600);

            return flag;
        });
    });

    function addAjax() {
        if ($("#sihgtImgInput").val() == "") {
            layer.msg('请选择缩略图！', {icon: 2, time: 1200});
            flag = false;
            return;
        }
        // 校验
        if (verify()) {

            if ($("#imgUrls").val() == "") {
                layer.msg('请至少选择一张景点图片！', {icon: 2, time: 1200});
                flag = false;
                return;
            }
            // 发起ajax请求
            $.ajax({
                url: "sight/addSight",
                type: "post",
                data: $("#addForm").serialize(),
                beforeSend: function () { // 发送前
                    layer.msg('添加中...', {icon: 16});
                },
                success: function (data) { // 请求完成
                    layer.msg('添加成功！', {icon: 1, time: 1200});
                },
                error: function (data) { // 出现异常
                    layer.msg('添加失败！', {icon: 2, time: 1200});
                }
            });

            // 校验通过，关闭弹出层
            layer.close(addLayerIndex);
        }
    }

    /* 休眠函数 */
    function sleep(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime) {
                return;
            }
        }
    }

    /* 表单校验 */
    function verify() {
        if ($("#sightCompany").val() == "请选择公司" || $("#sightCompany").val() == "") {
            layer.msg('请选择公司！', {icon: 6, time: 1200});
            return false;
        }
        if ($("#province").val() == "请选择省") {
            layer.msg('请选择省份！', {icon: 6, time: 1200});
            return false;
        }
        if ($("#city").val() == "请选择市") {
            layer.msg('请选择市！', {icon: 6, time: 1200});
            return false;
        }
        if ($("#county").val() == "请选择县/区" || $("#county").val() == "请选择") {
            layer.msg('请选择县/区！', {icon: 6, time: 1200});
            return false;
        }
        return true;
    }

    /* 刷新表格内容 */
    function refresh() {
        $(".layui-laypage-btn")[0].click();
        layer.msg("刷新成功！", {icon: 6, time: 1300});
    }

    layui.use(['table', 'form'], function () {
        var form = layui.form;
        var table = layui.table;

        /* where: {version:1.1, cl:app,page:1}  请求参数 */
        table.render({
            elem: '#table',
            method: 'POST', // 请求方式
            url: 'sight/findAllSightByPage',
            height: 520,
            page: true, // 开启分页
            limit: 10, // 每页显示的数据条数
            limits: [5, 10, 15, 20, 30, 50], // 每页显示数据可选项
            toolbar: '#toolbarTemplate', //开启工具栏，此处显示默认图标，可以自定义模板
            cols: [[ //表头
                {type: 'checkbox', fixed: 'left', align: 'center'},
                {field: 'sightId', align: 'center', title: '景点ID', width: 280, sort: true, fixed: 'left'},
                {field: 'sightName', align: 'center', title: '景点名称', width: 250},
                {
                    field: 'sightImg',
                    align: 'center',
                    title: '缩略图',
                    width: 190,
                    templet: '<div><img src="{{d.sightImg}}"></img><div>'
                },
                {
                    align: 'center', title: '主题', width: 220, templet: function (d) {
                        // 拼接主题的字符串
                        var themeStr = "";
                        // 获得主题集合对象
                        var themes = d.sightThemes;

                        for (var i = 0; themes != "undefined" && i < themes.length; i++) {
                            // 获得当前主题
                            var theme = themes[i];
                            themeStr += '<button class="layui-btn layui-btn-xs layui-btn-normal" style="cursor: default;">' + theme.themeName + '<i class="layui-icon layui-icon-close" style="cursor: pointer;" onclick="deleteTheme(\'' + d.sightId + '\', \'' + theme.themeId + '\', \'' + theme.themeName + '\');"></i><button>';
                        }

                        return themeStr;
                    }
                },
                {field: 'openTime', align: 'center', title: '开放时间', width: 290},
                {field: 'sightCompany', align: 'center', title: '所属公司', width: 230, templet: '<div>{{d.sightCompany.companyName}}</div>'},
                {field: 'introduce', align: 'center', title: '简介', width: 290},
                {field: 'orderNotice', align: 'center', title: '预定须知', width: 290},
                {
                    field: 'isOnSell', align: 'center', title: '在售状态', width: 160, templet: function (d) {
                        // 定义一个变量
                        var isChecked = "";
                        // 判断在售状态
                        if (d.isOnSell == 1) {
                            isChecked = "checked";
                        }
                        // 返回
                        return '<input type="checkbox" value="' + d.sightId + '" lay-filter="switch_status" name="onSellStatus" ' + isChecked + ' lay-skin="switch" lay-text="在售|停售">';
                    }
                },
                {field: 'collectCount', align: 'center', title: '收藏量', width: 160, sort: true, totalRow: true},
                {field: 'sellCount', align: 'center', title: '销量', width: 160, sort: true, totalRow: true},
                {
                    field: 'country',
                    align: 'center',
                    title: '所在国家',
                    width: 150,
                    sort: true,
                    templet: '<div>{{d.country.countryName}}</div>'
                },
                {
                    title: '地址', align: 'center', width: 290, sort: true, templet: function (d) {
                        var html = "";
                        html += d.province.provinceName;
                        html += d.city.cityName;
                        html += d.detailAddr;
                        return html;
                    }
                },
                {fixed: 'right', align: 'center', title: '操作', toolbar: '#operateTemplate', width: 300}
            ]],
            done: function (res) {
                // table = res.data;
                // 修改表头背景颜色
                $('th').css({'background-color': '#c7e0d0', 'color': '#ffad8d', 'font-weight': 'bold'});
            }
        });

        //监听行工具事件
        table.on('tool(table_filter)', function (obj) {
            var data = obj.data;
            /* 删除行数据 */
            if (obj.event === 'del') {
                // 调用删除景点的函数
                deleteSight(data.sightId);
            } else if (obj.event === 'edit') {
                layer.prompt({
                    formType: 2
                    , value: data.email
                }, function (value, index) {
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }
        });

        // 监听表格中的开关--在售或者停售
        form.on('switch(switch_status)', function (obj) {
            // 获得开关原始DOM对象
            var elem = $(obj.elem);
            // 获得景点id
            var sightId = elem.val();
            var isChecked = elem.is(":checked");
            var msg = "";

            // 判断是设置为在售还是停售
            if (isChecked) { // 在售
                msg = "确定切换为在售吗？";
            } else { // 停售
                msg = "确定切换为停售吗？";
            }

            layer.confirm(msg, {
                icon: 3,
                title: "提示",
                btn: ['确定', '取消'],
                btn1: function (index) { // 确定回调
                    // 发起ajax请求
                    $.ajax({
                        url: "sight/updateOnSellStatus",
                        type: "post",
                        data: {sightId: sightId, newStatus: isChecked ? 1 : 0},
                        beforeSend: function () { // 发送前
                            layer.msg('切换中...', {icon: 16});

                        },
                        success: function (data) { // 请求完成
                            layer.msg('切换成功!', {icon: 1, time: 1200});
                        },
                        error: function (data) { // 出现异常
                            layer.msg('切换失败!', {icon: 2, time: 1200});
                        }
                    });
                },
                btn2: function (index) { // 取消回调
                    elem.prop("checked", !isChecked);
                    // 重新进行渲染【必须要，否则不会变化】
                    form.render();
                }
            });
        });

    });


    /* 通过景点id和主题id删除景点主题 */
    function deleteTheme(sightId, themeId, themeName) {

        // 发起ajax请求
        layer.confirm("确定删除" + themeName + "主题吗？", {
            icon: 3,
            title: "提示",
            btn: ['确定', '取消'],
            btn1: function (index) { // 确定回调
                // 发起ajax请求
                $.ajax({
                    url: "sight/deleteSightTheme",
                    type: "post",
                    data: {sightId: sightId, themeId: themeId},
                    beforeSend: function () { // 发送前
                        layer.msg('删除中...', {icon: 16});
                    },
                    success: function (data) { // 请求成功
                        layer.msg('删除成功!', {icon: 1, time: 1200});
                        // 重新进行渲染，刷新当前页码内容
                        $(".layui-laypage-btn")[0].click();
                    },
                    error: function (data) { // 出现异常
                        layer.msg('删除失败!', {icon: 2, time: 1200});
                    }
                });
            }
        });
    }

    /* 通过景点id删除景点 */
    function deleteSight(sightId) {

        // 发起ajax请求
        layer.confirm("确定删除该景点吗？", {
            icon: 3,
            title: "提示",
            btn: ['确定', '取消'],
            btn1: function (index) { // 确定回调
                // 发起ajax请求
                $.ajax({
                    url: "sight/deleteSight",
                    type: "post",
                    data: {sightId: sightId},
                    beforeSend: function () { // 发送前
                        layer.msg('删除中...', {icon: 16});
                    },
                    success: function (data) { // 请求成功
                        layer.msg('删除成功！', {icon: 1, time: 1200});
                        // 重新进行渲染，刷新当前页码内容
                        $(".layui-laypage-btn")[0].click();
                    },
                    error: function (data) { // 出现异常
                        layer.msg('删除失败！', {icon: 2, time: 1200});
                    }
                });
            }
        });
    }

    /* 批量删除按钮 */
    function deleteBatch() {
        //获取table实例
        var table = layui.table;
        //获取选中的复选框
        var datas = table.checkStatus("table");
        var layer = layui.layer;
        //判断是否选中复选框
        if(datas.data.length == 0){
            layer.msg("请选择复选框", {icon: 7, time: 1200});
        }else{
            layer.confirm('确认删除吗?', {icon: 7, title:'确认框'}, function(index){
                //关闭弹出的确认提示框
                // layer.close(index);

                //创建选中复选框长度的数组，用于保存选中复选框的id
                var ids = new Array(datas.data.length);
                //将选中的复选框中的id赋值给ids数组。给后台接收参数用
                for(var i=0;i<datas.data.length;i++){
                    ids[i] = datas.data[i].sightId;
                }
                console.log(ids);
                //发送批量删除的ajax
                $.ajax({
                    url: "sight/deleteBatch",
                    data: {"ids": ids},
                    type: "post",
                    beforeSend: function () { // 发送前
                        layer.msg('删除中...', {icon: 16});
                    },
                    success: function (result) {
                        if(result.code == 0){
                            //删除成功
                            layer.msg(result.msg, {icon: 1, time: 1500, shade: 0.4});
                        }
                    },
                    error: function () {
                        layer.msg("删除失败！", {icon: 2, time: 1500, shade: 0.4});
                    }
                });

                //刷新表格
                $(".layui-laypage-btn")[0].click();
            });
        }
    }

    function checkLength(which) {
        var maxChars = 200; //
        if (which.value.length > maxChars) {
            layer.open({
                icon: 2,
                title: '提示框',
                content: '您出入的字数超多限制!'
            });
            // 超过限制的字数了就将 文本框中的内容按规定的字数 截取
            which.value = which.value.substring(0, maxChars);
            return false;
        } else {
            var curr = maxChars - which.value.length; //250 减去 当前输入的
            document.getElementById("sy").innerHTML = curr.toString();
            return true;
        }
    }

    function AdlistOrders(id) {
        window.location.href = "Ads_list.html?=" + id;
    }

    var addLayerIndex = -1;

    /* 添加按钮的点击事件 */
    function add() {
        addLayerIndex = layer.open({
            type: 1,
            title: '添加景点',
            maxmin: true,
            shadeClose: false, //点击遮罩关闭层
            moveOut: true, // 是否允许拖拽到窗口外
            area: ['750px', ''],
            content: $('#sort_style_add')
        });
    }

    /* 图片上传 */
    layui.use('upload', function () {
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#test1', //绑定元素
            url: 'sight/uploadSightImg', //上传接口
            accept: 'images', // 指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）【默认值：images】
            auto: false, // 是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传【默认值：true】
            bindAction: '#uploadImg', // 指向一个按钮触发上传
            choose: function (obj) { // 选择文件后的回调函数。返回一个object参数
                // 上传完毕回调
                /* 预读本地文件，如果是多文件，则会遍历。(不支持ie8/9) */
                // index:文件索引
                // file:文件对象
                // result:文件base64编码，比如图片
                obj.preview(function (index, file, result) {
                    $("#sight_img").prop("src", result);
                });
            },
            done: function (res) { // 执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）
                // 上传完毕回调
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('缩略图上传失败', {icon:2, time: 1200});
                }
                //上传成功
                $("#sihgtImgInput").val(res.data);
                // 标志位置为ture
                imgFlag = true;
            },
            error: function (res) { // 返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法
                //请求异常回调
                layer.msg('缩略图上传失败', {icon:2, time: 1200});
            }
        });
    });

    /* 关闭添加景点弹出层 */
    function cancelSubmit() {
        if (addLayerIndex != -1) {
            layer.close(addLayerIndex);
        }
    }

    <%-- 省份、城市、区三级联动 --%>
    /* 筛选景点 */
    //配置插件目录
    layui.config({
        base: 'js/layui/mods/', // 静态资源所在路径
        version: '1.0'
    });
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'layarea'], function() {
        var layer = layui.layer,
            form = layui.form,
            layarea = layui.layarea;

        layarea.render({
            elem: '#area-picker',
            /*data: { // 默认选择
                 province: '请选择',
                 city: '北京市',
                 county: '东城区'
            },*/
            change: function(res) {
                // 选择之后赋值
                $("#province").val(res.province);
                $("#city").val(res.city);
                $("#county").val(res.county);
            }
        });
    });

    /* 添加景点 */
    //配置插件目录
    layui.config({
        base: 'js/layui/mods/',
        version: '1.0'
    });
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'layarea'], function() {
        var layer = layui.layer,
            form = layui.form,
            layarea = layui.layarea;

        layarea.render({
            elem: '#area-picker2',
            /*data: { // 默认选择
                 province: '请选择',
                 city: '北京市',
                 county: '东城区'
            },*/
            change: function(res) {
                // 选择之后赋值
                $("#province").val(res.province);
                $("#city").val(res.city);
                $("#county").val(res.county);
            }
        });
    });

    //多图容器 【注册全局变量】
    /* 上传多张景点图片 */
    layui.use(["upload", "form", "layer"], function () {
        var layer = layui.layer,
            upload = layui.upload,
            form = layui.form;
            form.render();

        var files; // 文件数组
        var imgUrls = ""; // 上传图片将在数据库中存储的路径【有多个用&拼接】
        //拖拽上传
        var uploadInst = upload.render({
            elem: '#imgsDiv',
            url: 'sight/uploadSightImg',
            auto: false, // 是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传【默认值：true】
            bindAction: '#uploadImgs', // 指向一个按钮触发上传
            multiple: true,
            method: 'post',                 //请求上传的 http 类型
            // number: 6,                      //最大上传图片数量
            choose: function (obj) {
                files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列【如果没有这句，就只会上传最后一张图片】
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    // $('#imgList').append('<span><img src="' + result
                    //     + '" alt="' + file.name
                    //     + '"height="90px" width="120px" class="layui-upload-img uploadImgPreView" style="margin-left: 10px;margin-top: 10px;">' +
                    //      '<i class="layui-icon layui-icon-close" index="' + index + '" style="cursor: pointer;margin-left: -20px;background-color: white;" onclick="deleteImg(this' + ',\'' + files + '\');"></i></span>');
                    var img="" +
                        "<span class='uploadSpan'>" +
                        "<img src='" + result + "' alt='" + file.name + "' index='"+index+"' class='layui-upload-img uploadImg' height='90px' width='120px' style='margin-left: 10px;margin-top: 10px;'>" +
                        "<span class='DelUPImg'>" +
                        "<icon class='layui-icon layui-icon-delete' style='cursor: pointer;margin-left: -20px;background-color: white;'></icon>" +
                        "</span>" +
                        "</span>";
                    $('#imgList').append(img);
                });
            },
            done: function (res) {
                if (res.code == 0) { // 上传成功
                    if (imgUrls == "") {
                        imgUrls += res.data;
                    } else {
                        imgUrls += "&" + res.data;
                    }
                }
            },
            allDone: function(res) {
                $("#imgUrls").val(imgUrls);
                // 标志位置为true
                imgsFlag = true;
            },
            error: function () {
                layer.msg('图片上传失败', {icon:2, time: 1200});
            }
        });

        /* 点击删除图片项的按钮 */
        $(document).on('click','.DelUPImg',function (e) {
            delete files[$(this).prev().attr("index")]; // 从图片数组中删除元素。根据下标删除
            $(this).parent().remove(); // 在页面上移除显示图片的节点
        });

        /* 删除图片 */
        // function deleteImg(ele, files) {
        //     $(ele).parent().remove(); // 将图片标签移除【在页面上移除显示图片的节点】
        //     // $(ele).remove();  // 将关闭图标移除【在页面上移除显示图片的节点】
        //     delete files[$(ele).attr("index")]; //从图片数组中删除元素。根据下标删除
        // }

    });

    // $("#imgsDiv").click(function () {
    //     alert($("#imgList").children().length);
    // });


</script>

</body>
</html>